<template>
    <div>
        <h2>发表评论</h2>
        <hr>
        <textarea placeholder="请输入要BB的内容（最多BB120字）" maxlength="120" v-model='newComContent'></textarea>
        <mt-button type = 'primary' size = 'large' @click="postComment">发表评论</mt-button>
        <ul>
            <li type='none' v-for='(item,i) in commentsList'  :key='i' >
                <p class="title">
                    <span> 第{{i+1}}楼</span>
                    <span>用户:{{item.user}}</span>
                    <span>发表时间:{{item.pubtime | dateFormat}}</span> 
                </p>
                <p class="content">{{item.content}}</p>
            </li>
            <hr>            
        </ul>
        <mt-button type = 'danger' size = 'large' plain>加载更多</mt-button>
    </div>
</template>
<script>
export default {
    data(){
        return {
            newComContent:'',
            commentsList:[
                {user:'李白',pubtime:new Date(),content:'天生我才必有用，我辈岂是蓬蒿人'},
                {user:'白居易',pubtime:new Date(),content:'七月七日长生殿，夜半无人私语时'},
                {user:'孟郊',pubtime:new Date(),content:'一日看尽长安花'},
            ]
        }
    },
    created(){
        console.log(this.id)        
    },
    methods:{
        postComment(){
            if(this.newComContent.trim().length === 0) return Toast('评论内容不能为空')
            let newComment = { user:'开发测试组',pubtime:new Date(), content:this.newComContent}
            this.commentsList.unshift(newComment)
            this.newComContent = ''
        }
    },
    props:['id']
}
</script>
<style lang="scss" scoped>
    h2{
        font-size: 16px;
    }
    textarea{
        font-size: 14px;
        height: 85px;
        margin: 0;
    }
    ul{
        margin: 10px 0;
        padding:0;
        li{
            .title{
                background-color: #ddd;
                font-size: 12px;
                color: black;
                display: flex;
                justify-content: space-around;
                letter-spacing: 0.1em;
                border-radius: 2px;
            }
            .content{
                text-indent: 1em;
                font-size: 14px;
                color: black;
            }
        }
    }
</style>
